<template>
  <view class="content">
    <view class="header">
      <view class="title">{{ title || '社区公益平台' }}</view>
      <view class="title_desc">连接邻里，服务社区</view>
    </view>
    <view class="login-form">
      <u-form labelPosition="top" :model="loginForm" :rules="rules" labelWidth="200rpx" ref="uForm">
        <u-form-item label="用户名" prop="username" borderBottom>
          <u-input v-model="loginForm.username" placeholder="请输入用户名" border="none">
          </u-input>
        </u-form-item>
        <u-form-item v-if="loginType === 'password'" label="密码" prop="password" borderBottom>
          <u-input v-model="loginForm.password" password placeholder="请输入密码" border="none">
          </u-input>
        </u-form-item>
        <u-form-item v-else label="验证码" prop="smsCode" borderBottom>
          <u-input v-model="loginForm.smsCode" placeholder="请输入验证码" border="none">
            <template #suffix>
              <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
              <u-button @tap="getSmsCode" :text="tips" type="primary" size="mini"></u-button>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="图形验证码" prop="code" borderBottom>
          <view class="imageCode-content">
            <u-input v-model="loginForm.code" placeholder="请输入图形验证码" border="none"></u-input>
            <image class="imageCode-content-img" :src="codeUrl" alt="" @click="getCode"></image>
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="btns">
      <u-button class="loginBtn" type="success" block @click="submit">登录</u-button>
      <view class="otherBtns">
        <!-- <text class="otherBtns-text" @click="goRegister">注册</text> -->
        <!-- <text class="otherBtns-text" @click="cutLoginType">{{ loginType === 'password' ? '验证码登录' : '密码登录' }}</text> -->
      </view>
      <!-- <view class="login-type">
        <view @click="wxLogin">
          <image src="https://sanshengcai.com/home/images/wx.png" mode="aspectFit" style="width: 80rpx;height: 80rpx;" ></image>
          <view>快捷登录</view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import api from '../../request/api/login'
import { mapState, mapActions } from 'vuex'
const baseForm = {
  uuid: '',
  username: '',
  password: '',
  code: ''
}
export default {
  data() {
    return {
      title: '',
      tips: '',
      loginType: 'password',
      loginForm: baseForm,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: ['blur'] }],
        password: [{ required: true, message: '请输入密码', trigger: ['blur'] }],
        code: [{ required: true, message: '请填写图形验证码', trigger: ['blur'] }]
      },
      codeUrl: '',
      showCaptchaEnabled: true
    }
  },
  computed: {
    ...mapState('userInfo', ['token'])
  },
  async onShow() {
    await this.getCode()
  },
  onLoad(options) {
    this.title = options.title
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    ...mapActions('userInfo', ['Login']),
    // 微信快捷登录
    wxLogin() {
      uni.reLaunch({
        url: '/pages/newLogin/index'
      })
    },
    goRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      });
    },
    cutLoginType() {
      this.loginType = this.loginType === 'password' ? 'smsCode' : 'password'
    },
    async submit() {
      const valid = await this.$refs.uForm.validate().catch(() => false)
      if (!valid) return
      await this.Login(this.loginForm)
      uni.$showMsg('登录成功')
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
        this.resetLoginForm()
      }, 200)
    },
    async resetLoginForm() {
      Object.assign(this.loginForm, baseForm)
      await this.getCode()
    },
    codeChange(text) {
      this.tips = text;
    },
    getSmsCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    async getCode() {
      const { data: captchaEnabled, img, uuid } = await api.getCodeImg()
      this.showCaptchaEnabled = captchaEnabled === undefined ? true : captchaEnabled
      if (this.showCaptchaEnabled) {
        this.codeUrl = "data:image/gif;base64," + img
        this.loginForm.uuid = uuid
      }
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 80rpx);
  background-color: #f8f9fa;
  padding: 40rpx;
}

.header {
  text-align: center;
  margin: 120rpx 0 80rpx;
}

.title {
  font-size: 50rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.title_desc {
  color: #7f8c8d;
  font-size: 25rpx;
}

.login-form {
  min-height: 300rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 35rpx 55rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.login-form::v-deep .u-form-item__body__left__content__label {
  width: 120rpx;
  margin-bottom: 15rpx;
}

.login-form::v-deep .u-button--mini {
  height: 45rpx;
}

.login-form-label {
  padding: 0 32rpx;
  margin-top: 15rpx;
}

.btns {
  margin-top: 70rpx;
  text-align: center;
}

.btns::v-deep .u-button {
  border-radius: 12rpx;
}

.otherBtns {
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  padding: 0 15rpx;
}

.otherBtns-text {
  color: #1989fa;
}

.imageCode-content {
  display: flex;

  .imageCode-content-img {
    width: 190rpx;
    height: 70rpx;
    margin-left: 15rpx;
  }
}

.login-type {
  display: flex;
  justify-content: center;
}
</style>
